<script setup>

    import { ref,reactive,onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import axios from 'axios'
    import { ElMessage  } from 'element-plus';
    import { userStore } from '@/store/user.js'

    //购物车中的商品列表
    const cartItems = ref([])
    //购物车
    const cart = ref({})

    //路由
    const router = useRouter();
    //Pinia
    const store = userStore()

    //调转到主页
    const goShopping = ()=>{
        router.push("/").catch(error => error);
    }

    const settleAccounts = ()=>{
        router.push("/settlement").catch(error => error);
    }

    const showAll = ()=>{
        axios.get("/cart").then(resp=>{
            //得到购物车数据
            cart.value = resp.data;
            //得到购物车项
            cartItems.value = cart.value.itemList;
            console.log(cart.value)
            console.log(cartItems.value)
        })
    }

    onMounted(()=>{
        //加载数据
        showAll()
    })

</script>

<template>
    <el-card class="shopping-cart">

        <template v-if="cartItems.length > 0">
            <!-- 显示购物车项表格 -->
            <el-table :data="cartItems" style="width: 100%"
                      stripe highlight-current-row class="cart-table">
                <el-table-column type="index" width="55" label="序号">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="书名"></el-table-column>

                <el-table-column prop="image" label="图片">
                    <template #default="{ row }">

                        <!--
                            $urlImage  全局路劲  http://localhost:8080/images/
                            row   当前行的对象 数据 row.image = b65ce58db12345f79684401612ccceee.jpg
                            最后的路径是: http://localhost:8080/images/b65ce58db12345f79684401612ccceee.jpg
                        -->
                        <el-image style="height: 120px;"
                                  :src="$urlImage + row.image"
                                  fit="fit">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="price" label="单价">
                    <template #default="{row}">
                        &yen; {{ row.price.toFixed(2) }}
                    </template>
                </el-table-column>

                <el-table-column prop="quantity" label="数量">
                    <template #default="{row}">
                        <el-input-number
                                v-model="row.quantity"
                                @change="handleChange(row)"
                                :min="1"
                                :max="99"
                                size="small"
                                style="width: 110px;">
                        </el-input-number>
                    </template>
                </el-table-column>

                <el-table-column prop="sum" label="金额">
                    <template #default="{row}">
                        &yen; {{ row.sum.toFixed(2) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="150">
                    <template #default="{row}">
                        <el-button type="text"
                                   @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  购物车下面部分 -->
            <div class="cart-footer">
                <el-button icon="el-icon-soccer"
                           style="float: left;" @click="handleClear">
                    清空购物车</el-button>
                <span>共有<span class="cart-number">
                    {{ cart.amount }}</span>本书</span>
                <span>合计：
                    <span style="color: red; font-size: 25px;">
                   &yen; {{cart.totalPrice ? cart.totalPrice.toFixed(2) : 0}}</span>
                </span>
                <el-button type="success"
                           @click="settleAccounts">
                    <el-icon :size="20"><ShoppingCart /></el-icon>
                    结算
                </el-button>
            </div>
        </template>

        <!-- 没有内容的显示 -->
        <template v-else>
            <div class="cart-empty">
                <el-empty description="购物车是空的"></el-empty>
                <el-button type="primary" style="width: 150px"
                           @click="goShopping">
                    去购物
                </el-button>
            </div>
        </template>
    </el-card>
</template>

<style scoped>
    .shopping-cart {
        margin: 15px;
        border-radius: 10px;
    }

    .cart-table {
        border-radius: 10px;
    }

    .cart-footer {
        margin-top: 10px;
        text-align: right;
    }

    /* 所有的子元素 */
    .cart-footer > * {
        margin: 10px;
    }

    .cart-number {
        color: red;
        font-size: 22px;
    }

    .cart-empty {
        text-align: center;
    }
</style>